<template>
   <div class="platfrom-content">
      <template v-for="(item,index) in paltformList">
        <div :class="isHall?'single1':'single'" :key="index"  @click="backVillage(index)" :style="{cursor:index===0?'pointer':'unset'}">
            <img :src="item.img" alt="">
            <div class="name">{{item.name}}</div>
            <div class="nums">
              <Number :number="item.num" :type="1" />
              <a-icon type="right" style="font-size:14px;color:#fff;padding:0 0 12px 5px" v-if="index===0" />
            </div>
        </div>
        <img v-if="index!=paltformList.length-1" src="../assets/line.png" alt="" :key="index" class="line">
      </template>
    </div>
</template>
<script>
import Number from './numbers.vue'
import { queryTotaldp } from '@/api/dashboards'
export default {
  components:{Number},
  props: {
      isHall:{
          type:Number
      },
      selectYear:{
          type:Number
      },
      defaultYear:{
          type:Number
      }
  },
  data() {
    return {
         paltformList:[
              {
                img:require('../assets/zzmj.png'),
                name:'种植面积 (亩)',
                num:0
              },
              {
                img:require('../assets/xgcl.png'),
                name:'鲜果产量 (吨)',
                num:0
              },
              {
                img:require('../assets/cycz.png'),
                name:'产业产值 (万元)',
                num:0
              },
              {
                img:require('../assets/zzgys.png'),
                name:'种植果园数 (个)',
                num:0
              },
              {
                img:require('../assets/zzhrs.png'),
                name:'种植户人数 (人)',
                num:0
              },
              {
                img:require('../assets/scjgqys.png'),
                name:'生产加工企业数 (家)',
                num:0
              },
            ],
    }
  },
  watch: {
    isHall:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
    selectYear:{
        immediate: true,
        handler: function(val) {
            if(val){
                this.queryTotaldp(val)
            }
        }
    },
    defaultYear:{
        immediate: true,
        handler: function(val) {
            if(val){
                this.queryTotaldp(val)
            }
        }
    },
  },
  mounted(){
      this.queryTotaldp()
  },
  methods: {
      async queryTotaldp(val) {
          let res = await queryTotaldp({
          year:val,
          })
          if(res.result){
              this.paltformList[0].num = res.result.plantArea&&res.result.plantArea
              this.paltformList[1].num = res.result.fruitsOutput&&res.result.fruitsOutput
              this.paltformList[2].num = res.result.industryProduction&&res.result.industryProduction
              this.paltformList[3].num = res.result.plantGarden&&res.result.plantGarden
              this.paltformList[4].num = res.result.plantPeople&&res.result.plantPeople
              this.paltformList[5].num = res.result.company&&res.result.company
          }
      },
      backVillage(val){
          this.$emit('backVillage', val);
        }
  },
}
</script>
<style lang="less" scoped>
.platfrom-content{
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    // position: absolute;
    // top: 53px;
    // left: 50%;
    // transform: translate(-50%);
    // z-index: 99;
    // width: 996px;
    // height: 180px;
    // border-radius: 6px;
    // background: rgba(11, 17, 51, 0.85);
    .single{
      width: 166px;
      height: 180px;
      padding-top: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img{
        width: 60px;
        height: 60px;
      }
      .name{
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        font-weight: 400;
        padding-bottom: 5px;
        // padding:0 5px 0;
      }
      .nums{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
   .single1{
      width: 250px;
      height: 180px;
      padding-top: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img{
        width: 60px;
        height: 60px;
      }
      .name{
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        font-weight: 400;
        padding-bottom: 5px;
        // padding:0 5px 0;
      }
      .nums{
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .line{
      width: 1px;
      height: 118px;
      z-index: 99;
    }
  }
</style>